<template>
    <div class="search">
        <div class="search-box">
            <van-icon class="back" name="revoke" @click="goback"/>
            <van-search v-model="keyword"  placeholder="请输入搜索关键词" class="Search" @search="getval(keyword)" />
            <div class="searchText">搜索</div>
        </div>
        <div class="Product-box">
            <div class="Product-item" v-for="(item,index) in filterName" :key="index" @click = "enterDetail(item)">
                <div class="img-box">
                    <img class="img-auto" :src="item.Img">
                </div>
                <div class="rig">
                    <div class="title">{{item.name}}</div>
                    <div class="desc">{{item.desc}}</div>
                    <div class="price">&yen;{{item.price}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Search",
    data() {
        return {
            keyword: "",
            // 所有商品数据
            allProduct: "",
        };
    },
    created() {
        // 接收菜单页面传来的所有商品数据
        this.allProduct = JSON.parse(this.$route.query.allProduct);
        console.log(this.allProduct);
    },
    computed:{
        "filterName"(){
            if(this.keyword.trim()==''){
                // 如果关键字为空,返回所有水果
                // return this.allProduct
                // 如果关键字为空,返回空
                return null
            }else if(this.keyword=="全部"){
                return this.allProduct
            }else{
                return this.allProduct.filter(item=>{
                    return item.name.includes(this.keyword)
                })
            }
        }
    },
    methods: {
        goback() {
            this.$router.back();
        },
        // 点击进入详情页
        enterDetail(item){
                this.$router.push({
                    name:"Productdetail",
                    query:{
                        item:JSON.stringify(item)}
                })
            },
    },
};
</script>

<style lang="less" scoped>
.search {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    .search-box {
        position: fixed;
        top: 0;
        margin: 0 0 0 50px;
        display: flex;
        .Search {
            width: 240px;
        }
        .back {
            width: 20px;
            height: 20px;
            margin: 18px 0 0 -30px;
            font-size: 20px;
        }
        .searchText {
            width: 35px;
            height: 22px;
            font-size: 16px;
            font-weight: 550;
            margin: 17px 0 0 10px;
        }
    }
    .Product-box {
        width: 100%;
        height: calc(100% - 54px);
        position: fixed;
        bottom: 0;
        overflow-y: auto;
        .Product-item {
            width: 350px;
            height: 100px;
            margin: 0 auto;
            margin-top: 20px;
            display: flex;
            .img-box{
                width: 100px;
                height: 100%;
                background-color: red;
                .img-auto{
                    width: 100%;
                    display: block;
                }
            }
            .rig{
                width: 240px;
                height: 100%;
                margin-left: 10px;
                padding-top: 10px;
                .title{
                    font-size: 16px;
                    font-weight: 550;
                    margin-bottom: 5px;
                }
                .desc{
                    color: #8e9393;
                    font-size: 14px;
                    margin-bottom: 20px;
                }
                .price{
                    font-size: 16px;
                    font-weight: 700;
                }
            }
        }
    }
}
</style>
